<template>
  <div class="container">
    <div class="title">请横屏并在矩形框内手写签名</div>
    <div v-if="false" class="landscape">
      <div class="box">
        <!-- <vue-esign
          ref="esign"
          :width="normalWidth"
          :height="250"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
        /> -->
        <esign ref="esign"></esign>
      </div>
      <div class="landscape-button">
        <van-button @click="handleReset">重置</van-button>
        <van-button class="primary" @click="handleGenerate">保存</van-button>
      </div>
    </div>
    <div v-else class="vertical">
      <div class="vertical-button">
        <van-button @click="handleReset"><div class="rotate-text">重</div>
          <div class="rotate-text">置</div>
        </van-button>
        <van-button class="primary" @click="handleGenerate"><div class="rotate-text">保</div>
          <div class="rotate-text">存</div></van-button>
      </div>
      <div class="esign box">
        <!-- <vue-esign
          ref="esign"
          :width="widthStyle"
          :height="heightStyle"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor="'#fff'"
          :isClearBgColor="false"
        /> -->
        <esign ref="esign"></esign>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadByStr } from '@/api/base'
import { mutations } from '@/observable'
import esign from '@/components/esign'

export default {
  name: 'VueTeaSign',

  components: { esign },

  data() {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '#fff',
      resultImg: '',
      isCrop: false,
      isClear: false
    }
  },

  computed: {
    widthStyle() {
      return (
        'height:' + Number(document.body.clientWidth - 16 - 16 - 16 - 40) + 'px'
      )
    },
    heightStyle() {
      return (
        'height:' + Number(document.body.clientHeight - 16 - 16 - 30) + 'px'
      )
    },
    normalWidth() {
      return Number(document.body.clientWidth - 16 - 16)
    }
  },

  mounted() {
    // let user = this.$route.query.user
  },
  methods: {
    // 重置
    handleReset() {
      this.$refs.esign.reset()
      this.bgColor = '#fff'
    },

    // 保存
    handleGenerate() {
      this.$refs.esign
        .save()
        // eslint-disable-next-line promise/always-return
        .then((res) => {
          this.resultImg = res
          this.upload(res)
        })
        // eslint-disable-next-line promise/always-return
        .catch((err) => {
          console.log(err.message)
          if (err === 'Warning: Not Signned!') {
            this.$toast('请手写签名')
          }
        })
    },

    // 将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(',') // 得到base64后面的文件数据
      let mime = arr[0].match(/:(.*?);/)[1] // 得到文件类型  image/png
      if (!filename) {
        // 若无文件名则取当前时间戳
        filename = Date.parse(new Date()) + '.png'
      }
      let bstr = atob(arr[1]) // 将base64文件数据进行解码
      let n = bstr.length // 得到解码后数据的长度
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },

    // 上传服务器
    async upload(file) {
      this.$toast.loading({
        message: '',
        duration: 0,
        forbidClick: true,
        overlay: true
      })
      let params = {
        base64Str: file.replace('data:image/png;base64,', ''),
        directoryName: 'pic'
      }
      const res = await uploadByStr(params)
      if (res.code === '0') {
        mutations.setSignId(res.data.id)
        this.$toast.clear()
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.esign {
  // height: 100vh;
}
.title {
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
}
.landscape {
  flex: 1;

  .box {
    margin: 16px;
    border: 1px dotted #cdd0d8;
    background-color: #fff;
  }
  &-button {
    display: flex;
    justify-content: space-evenly;
    .van-button {
      width: 153px;
      height: 40px;
      border-radius: 4px;
    }
    .primary {
      background-color: #4e75d0;
      color: #fff;
    }
  }
}
.vertical {
  flex: 1;
  display: flex;
  .box {
    margin: 0 16px 16px 16px;
    border: 1px dotted #cdd0d8;
    flex: 1;
  }
  &-button {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .van-button {
      width: 40px;
      height: 153px;
      border-radius: 4px;
      margin-left: 16px;
    }

    .rotate-text {
      transform: rotate(90deg);
    }
    .primary {
      background-color: #4e75d0;
      color: #fff;
    }
  }
}
</style>
